<template>
	<view class="yaoyue">
		<scroll-view style="height: 100%;" ref="scrollview" scroll-y="true" @scrolltolower="scrolltolower">
			<view class="item" v-for="(item,index) in list" :key="index" @click="link(item)">
				<image class="img" :src="item.avatarUrl" mode="" mode="aspectFill"></image>
				<div class="name">
					<div class="big">{{ item.nickName }}</div>
					<!-- <div class="small">（{{ item.content }}）</div> -->
				</div>
				<!-- <div class="company">{{ item.company }}</div> -->
				<div class="content ellipsis1">{{ item.content }}</div>
				<div class="right">{{ item.createdTime }}</div>
				<div class="tips" v-if="item.unReadNum > 0">{{ item.unReadNum }}</div>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import protal from '@/api/protal'

	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				total: 0
			}
		},
		created() {
			this.getData()
		},
		methods: {
			init() {
				this.pageNum = 1
				this.getData()
			},
			getData() {
				const params = {
					pageNum: this.pageNum,
					pageSize: 30
				}
				protal.queryChatWindow(params).then(res => {
					this.loading = false
					if (res.code == '0000') {
						this.total = res.total
						if (this.pageNum == 1) {
							this.list = res.data
						} else {
							this.list = [...this.list, ...res.data]
						}
					}
				}).catch(err => {
					this.loading = false
				})
			},
			link(item) {
				uni.navigateTo({
					url: '/pages/chat/index?personUuid=' + item.relUuid
				})
			},
			scrolltolower() {
				if (this.total && this.total > this.list.length && !this.loading) {
					this.pageNum++
					this.loading = true
					this.getData()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.yaoyue {
		height: 100%;
		padding-bottom: 100rpx;
		overflow: hidden;
		padding-top: 6px;

		.item {
			width: 694rpx;
			height: 87px;
			margin: 0 auto;
			overflow: hidden;
			box-sizing: border-box;
			padding-top: 12px;
			padding-left: 61px;
			padding-right: 17px;
			position: relative;

			.img {
				position: absolute;
				left: 0;
				top: 12px;
				width: 51px;
				height: 51px;
				border-radius: 8px;
			}

			.name {
				display: flex;

				.big {
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 16px;
					color: #0A0F1A;
					line-height: 16px;
					text-align: left;
					font-style: normal;
				}

				.small {
					font-family: AlibabaPuHuiTi_3_55_Regular;
					font-size: 12px;
					color: #0A0F1A;
					line-height: 18px;
					text-align: left;
					font-style: normal;
				}
			}

			.company {
				padding: 4px 0 6px;
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 11px;
				color: #0A0F1A;
				line-height: 12px;
				text-align: left;
				font-style: normal;
			}

			.content {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 13px;
				color: #000000;
				line-height: 13px;
				text-align: left;
				font-style: normal;
				margin-top: 16px;
			}

			.right {
				position: absolute;
				right: 14px;
				top: 24px;
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 12px;
				color: #000000;
				line-height: 12px;
				text-align: center;
				font-style: normal;
			}

			.tips {
				position: absolute;
				left: 41px;
				top: 12px;
				min-width: 16px;
				height: 16px;
				border-radius: 8px;
				padding: 0 2px;
				box-sizing: border-box;
				background: #FF0000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Inter, Inter;
				font-weight: 500;
				font-size: 12px;
				color: #FFFFFF;
				line-height: 12px;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>